<template>
	<view class="add-notice-wrapper">
		<r-navbar title="表单" btnText="确定" @click="saveNotice" :disabled="saveDisabled"/>
		<textarea
			v-model="noticeContent" 
			class="add-notice-textarea" 
			placeholder="请输入提醒内容" 
		/>
		<view class="add-notice-block">
			<view class="add-notice-item" @click="showNoticeDate">
				<view class="add-notice-label">日期选择</view>
				<view class="add-notice-text">{{noticeDate}}</view>	
				<view class="iconfont iconchevron add-notice-icon" />
			</view>
			<view class="add-notice-item">
				<view class="add-notice-label">单选框</view>
				<r-radio-button
					v-model="noticeTime" 
					:list="typeRange" 
					:defaultValue="noticeTime"
					:width="280"
				/>
			</view>
            <view class="add-notice-item" @click="showPopupRadio">
            	<view class="add-notice-label">弹窗单选</view>
                <view class="add-notice-text">{{popupRadioText}}</view>	
            	<view class="iconfont iconchevron add-notice-icon" />
            </view>
            <r-popup-radio title="弹窗单选" v-model="popupRadioVisiable" :list="popupRadioList" 
            height="48%"
            :defaultValue="popupRadioValue"
            okText="取消"
            @confirm="changePopupRadio" />
		</view>
		<u-calendar
			v-model="noticeDateVisible" 
			mode="date"
			:min-date="minDate"
			:max-date="maxDate"
			@change="onDateConfirm"
			:safe-area-inset-bottom="true"
		/>
	</view>
</template>

<script>
	import day from "@/utils/day";
	
	export default {
		data() {
			return {
                popupRadioVisiable: false,
                popupRadioValue: 'xm',
                popupRadioText: '厦门',
                popupRadioList:[
                    {
                        label: '厦门',
                        value: 'xm'
                    },{
                        label: '龙岩',
                        value: 'ly'
                    }
                ],
				minDate: day().format("YYYY-MM-DD"),
				maxDate: "2100-01-01",
				typeRange: [
					{text: '上午', value: 'am'}, 
					{text: '下午', value: 'pm'}
				],
				noticeTime: 'am',
				noticeDate: '',
				noticeContent: '',
				noticeDateVisible: false,
				submiting: false
			}
		},
		computed: {
			saveDisabled() {
				return !this.noticeContent
			}
		},
		onLoad() {	
			this.noticeDate = day().format('YYYY.MM.DD');
		},
		methods: {
            showPopupRadio(){
                this.popupRadioVisiable = true
            },
            changePopupRadio(e){
                this.popupRadioValue = e;
                this.popupRadioText = this.popupRadioList.find(res=>res.value == e).label
            },
			// 保存
			saveNotice(e) {
				if(this.submiting) return;
				const { 
					noticeTime,
					noticeDate,
                    popupRadioValue,
					noticeContent 
				} = this;
                
				this.submiting = true;
				uni.showLoading();
				
				const noticeDateStr = noticeDate
				console.log({
                    noticeTime,
					tipTime: noticeDateStr,
					content: noticeContent,
                    popupRadioValue
				})
                
                setTimeout(()=>{
                    this.submiting = false;
                    uni.hideLoading();
                },2500)
			},
			// 时间确认
			onDateConfirm(dates) {
				this.noticeDate = day(dates.result).format('YYYY.MM.DD');
			},
			
			showNoticeDate() {
				this.noticeDateVisible = true;
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.add-notice-wrapper {
		height: 100vh;
		background: #EEF1F3;
	}
	.add-notice-block {
		padding-left: 44rpx;
		margin-top: 20rpx;
		background: #fff;
	}
	.add-notice-item {
		display: flex;
		align-items: center;
		height: 100rpx;
		padding-right: 44rpx;
		border-bottom: 2rpx $f-c-line solid;
	}
	.add-notice-item:last-child {
		border-bottom: none;
	}
	.add-notice-label {
		width: 172rpx;
		font-size: 30rpx;
		line-height: 40rpx;
		color: $f-c-title;
	}
	.add-notice-time {
		display: flex;
		width: 130rpx;
		border-radius: 16rpx;
		border-width: 2rpx;
		border-color: #F2F2F6;
		border-style: solid;
		margin-left: 46rpx;
		align-items: center;
		height: 68rpx;
		transition: 200ms ease;
	}
	.add-notice-time:hover {
		border-color: $f-c-active;
		box-shadow:  0 0 0 4rpx #B1D5FF;
	}
	.add-notice-time-text {
		font-size: 34rpx;
		line-height: 48rpx;
		color: $f-c-title;
		text-align: center;
	}
	.add-notice-time-text ::v-deep .uni-input-input:focus {
		color: $f-c-active;
	}
	.add-notice-text {
		flex: 1;
		font-size: 30rpx;
		line-height: 40rpx;
		color: $f-c-title;
		margin-right: 28rpx;
		width: 0;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
	.add-notice-icon {
		font-size: 24rpx;
		color: #E7E8E9;
	}
	.add-notice-textarea {
		font-size: 28rpx;
		line-height: 40rpx;
		color: $f-c-title;
		width: 100%;
		padding: 24rpx 44rpx;
		height: 328rpx;
		background: #fff;
		box-sizing: border-box;
	}
</style>
